<!-- 存款界面填表 -->
<template>
  <div>
    <div id="info">
      <p id="titleName">存款界面</p>
      <hr />
      <p id="xijie">明细</p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 60vw; margin: 0 auto"
      >
        <div v-if="this.$route.query.typeOpen != 'open'" style="display: flex">
          <el-form-item label="卡号" prop="cardNumber1" style="width: 50vw">
            <el-select v-model="ruleForm.cardNumber1" placeholder="请选择号码">
              <el-option
                v-for="(item, index) in ruleForm.cardNumber"
                :label="item"
                :value="item"
                :key="index"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="ruleForm.cardNumber1"></el-input> -->
          </el-form-item>
        </div>

        <div v-else style="display: flex">
          <el-form-item label="开户卡号" prop="cardNumber1" style="width: 35vw">
            <el-input v-model="ruleForm.cardNumber1"></el-input>
          </el-form-item>
          <el-button
            type="success"
            style="height: 50%; margin-left: 10px"
            @click="getId"
            >随机账号</el-button
          >
        </div>

        <div style="display: flex; justify-content: flex-start">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="userAge" style="width: 29.5vw">
            <el-input v-model.number="ruleForm.userAge" disabled></el-input>
          </el-form-item>
        </div>

        <div style="display: flex">
          <el-form-item label="证件类型" prop="region" style="width: 14.5vw">
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择类型"
              disabled
            >
              <el-option label="身份证" value="身份证"></el-option>
              <el-option label="港澳台身份证" value="港澳台身份证"></el-option>
              <el-option label="移民身份证" value="移民身份证"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号" prop="cardId" style="width: 35vw">
            <el-input v-model="ruleForm.cardId" disabled></el-input>
          </el-form-item>
        </div>

        <div style="display: flex">
          <el-form-item label="申请时间" required style="width: 20vw">
            <el-col>
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="状态" prop="resource" style="width: 32vw">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="审核通过"></el-radio>
              <el-radio label="审核中"></el-radio>
              <el-radio label="审核失败"></el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="金额" prop="qianqian" style="width: 29.5vw">
          <el-input
            @input="setdou(ruleForm.qianqian)"
            v-model="ruleForm.qianqian"
          ></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 5px; width: 35vw; text-align: right">
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="width: 10vw"
            >确定</el-button
          >
          <el-button @click="resetForm('ruleForm')" style="width: 10vw"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
  <script>
import cloneDeep from "lodash/cloneDeep";
import Special from "@/components/Special/special.vue";
export default {
  data() {
    return {
      ruleForm: {
        cardNumber1: "",
        cardNumber: [],
        userAge: "",
        cardId: "",
        phone: "",
        name: "",
        region: "",
        date1: "",
        resource: "",
        qianqian: "",
      },
      indexCount: this.$route.query.infoIdex,
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 5 个字符",
            trigger: "change",
          },
        ],
        userAge: [
          { required: true, message: "年龄不能为空" },
          { type: "number", message: "年龄必须为数字值" },
        ],
        cardId: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            min: 7,
            max: 11,
            message: "长度在 7 到 11 个字符",
            trigger: "blur",
          },
        ],
        region: [{ required: true, message: "请选择性别", trigger: "change" }],
        date1: [{ required: true, message: "请选择日期", trigger: "change" }],
        resource: [
          { required: true, message: "请选择当前状态", trigger: "change" },
        ],
        qianqian: [{ required: true, message: "金额不能为空" }],
      },
    };
  },
  created() {
    let newRule = this.$store.state.userInfo[this.indexCount - 0];
    this.ruleForm.cardNumber = cloneDeep(newRule.cardNumber2);
    (this.ruleForm.userAge = newRule.userAge),
      (this.ruleForm.cardId = newRule.cardId),
      (this.ruleForm.phone = newRule.phone),
      (this.ruleForm.name = newRule.userName),
      (this.ruleForm.region = newRule.region);
    this.ruleForm.date1 = newRule.date1;
    if (this.$route.query.row) {//判断时候是修改内容
      this.ruleForm.cardNumber1 = this.$route.query.row.id;
      this.ruleForm.qianqian = this.$route.query.row.money;
      this.ruleForm.resource = this.$route.query.row.cardAction;
    }
  },
  methods: {
    getId() {
      this.ruleForm.cardNumber1 =
        Math.floor(Math.random() * 9 + 1) +
        "" +
        Math.floor(Math.random() * 99999 + 1) +
        Math.floor(Math.random() * 999999 + 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$route.query.row) {//用户开卡，在进入了界面后
            this.$store.commit("addInfo3", {
              index1: this.indexCount,
              index2: this.$route.query.infoIdex2,
              id: this.ruleForm.cardNumber1,
              money: this.ruleForm.qianqian,
              cardAction: this.ruleForm.resource,
            });
          } else {//用户存款
            this.$store.commit("addInfo2", {
              index: this.indexCount,
              id: this.ruleForm.cardNumber1,
              money: this.ruleForm.qianqian,
              cardAction: this.ruleForm.resource,
            });
          }
          if (this.$route.query.typeOpen == "open") {
            this.$store.commit("addNumner", [
              this.ruleForm.cardNumber1,
              this.indexCount,
            ]);
         
          }
          this.$message({
              message: "操作成功！！",
              type: "success",
            });
          this.$router.push({
            name: "info",
            query: { cardid: this.ruleForm.cardId },
          });
        } else {
          this.$message({
            message: "登录信息有错，在检查检查",
            type: "warning",
          });
          return false;
        }
      });
    },
    resetForm() {
      this.$router.go(-1);
    },
    setdou(number) {
      //千分位字符
      var newNumber = number.replace(/,/g, "").split("").reverse();
      for (var i = 3; i < newNumber.length; i += 4) {
        newNumber.splice(i, 0, ",");
      }
      this.ruleForm.qianqian = newNumber.reverse().join("");
    },
  },
  components: { Special },
};
</script>
  
  <style lang="less" scoped>
#info {
  // display: flex;
  width: 100vw;
  height: 100vh;
  background-color: rgb(236, 234, 234);
  text-align: left;
  padding: 2vw;
  float: left;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#titleName,
#xijie {
  // background-color: rgb(188, 186, 186);
  font-size: 2rem;
  letter-spacing: 1rem;
  margin-left: 2rem;
}
</style>